<!-- Copyright 2022 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<head>
  <link href="./index.css" rel="stylesheet">
</head>


<style>
  :host {
    --selection-height: 5px;
    --total-height: 50px;
  }
  #svg {
    width: 100%;
    height: var(--total-height);
    position: sticky;
    top: 0px;
  }
  .marker {
    width: 2px;
    y: var(--selection-height);
    height: calc(var(--total-height) - var(--selection-height));
  }
  #indicator {
    stroke: var(--on-surface-color);
  }
  .continuousTrack {
    transform: translate(0, var(--selection-height));
  }
  #filler {
    height: var(--total-height);
  }
  #selection {
    height: var(--total-height);
  }
  #selection rect {
    height: var(--selection-height);
    fill: var(--selection-color);
  }
  #selection .top {
    y: 0px;
  }
  #selection .bottom {
    y: calc(var(--total-height) - var(--selection-height));
  }
  #selection line {
    stroke: var(--on-surface-color);
  }
</style>

<svg id="svg" viewBox="0 1 800 50" preserveAspectRatio=none>
  <defs>
    <pattern id="pattern1" patternUnits="userSpaceOnUse" width="4" height="4">
      <path d="M-1,1 l2,-2
                M0,4 l4,-4
                M3,5 l2,-2" stroke="white"/>
    </pattern>
    <mask id="mask1">
      <rect width="800" height="40" fill="url(#pattern1)" />
    </mask>
  </defs>
  <rect id="filler" width="800" fill-opacity="0"/>
  <g id="content"></g>
  <svg id="selection">
    <line x1="0%" y1="0" x2="0%" y2="50" />
    <rect class="top" x="0%" width="100%"></rect>
    <rect class="bottom" x="0%" width="100%"></rect>
    <line x1="100%" y1="0" x2="100%" y2="50" />
  </svg>
  <line id="indicator" x1="0" y1="0" x2="0" y2="50" />
</svg>
